<script setup lang="ts">
defineOptions({
  name: "fabBoardDetail"
});

import { ref, computed, inject } from "vue";
import { queryFabConsumeList, queryFabEmissionList } from "@/api/modules/fab";
import { useRouterStoreHook } from "@/store/modules/router";
import commonTable from "@/views/common/components/commonTable/index.vue";
import commonSearch from "@/views/common/components/commonSearch/index.vue";
import { useTableCloumns, useSearchOption } from "./hooks";
import { type SubjectType } from "@/utils/types";

const routerStore = useRouterStoreHook();
const subject = inject("subject", ref<SubjectType>("MACHINE"));

interface Props {
  index?: number;
  title?: string;
}

const props = withDefaults(defineProps<Props>(), {
  index: 1,
  title: "详情列表"
});

const commonTableRef = ref<CommonTable.TableRefType>(null);
const commonSearchRef = ref<CommonSearch.SearchFormRefType>(null);
const dialogWidth = ref<number>(1300);
const scrollbarHeight = ref<number>(460);
const searchOption = computed(() => useSearchOption(props.index));
const tableCloumns = computed(() => useTableCloumns(props.index));
const dialogVisible = defineModel({ type: Boolean, default: false });
const params = ref<any>({});

let defaultParams = {
  deviceClass: subject.value,
  gasName: subject.value === "GAS" ? routerStore.getActiveViceMenu : ""
};

let currentParams: any = {};

const getRowKey = row => {
  return row.id;
};

const getQueryApi = () => {
  switch (props.index) {
    case 1:
      return queryFabConsumeList;
    case 2:
      if (subject.value === "ELECTRICTITY") {
        return queryFabConsumeList;
      } else {
        return queryFabEmissionList;
      }
    default:
      return null;
  }
};

const handleClose = () => {
  commonSearchRef.value.reset();
  dialogVisible.value = false;
};

const updateParams = () => {
  params.value = { ...defaultParams, ...currentParams };
};

const submitSearchFormHandler = (form: any) => {
  currentParams = { ...currentParams, ...form };
  updateParams();
};

const resetSearchFormHandler = (form: any) => {
  currentParams = { ...form };
  updateParams();
  commonTableRef.value.clearSort();
};

const sortChangeHandler = ({ column, order }: CommonTable.SortParams) => {
  const { property: columnName = "" } = column;
  // ascending  descending
  const asc = order === "ascending" ? true : order === "descending" ? false : order;
  const orderList = [{ columnName, asc }];
  if (order) {
    currentParams["orderList"] = orderList;
  } else {
    delete currentParams.orderList;
  }
  updateParams();
};
</script>

<template>
  <px-dialog v-model="dialogVisible" :width="dialogWidth" :title="title" :before-close="handleClose">
    <div v-if="dialogVisible" class="fab-board-detail">
      <commonSearch ref="commonSearchRef" :option="searchOption" @submit="submitSearchFormHandler" @reset="resetSearchFormHandler" />
      <commonTable
        ref="commonTableRef"
        indexNeed
        :tableCloumns="tableCloumns"
        :height="scrollbarHeight"
        :row-key="getRowKey"
        :axiosApi="getQueryApi()"
        :params="params"
        @sort-change="sortChangeHandler"
      />
    </div>
  </px-dialog>
</template>

<style lang="scss" scoped>
.px-dialog {
  .fab-board-detail {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}
</style>
